<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-contain-card ant-pro-card-split"
      style="min-height: 500px;"
    >
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-card-col ant-pro-card-split-vertical"
          style="width: calc(100% - 580px); flex-shrink: 0;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-descriptions ant-pro-descriptions"
              >
                <div
                  class="ant-descriptions-header"
                >
                  <div
                    class="ant-descriptions-title"
                  >
                    高级定义列表
                  </div>
                  <div
                    class="ant-descriptions-extra"
                  >
                    <a
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      链路
                    </a>
                    <a
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      报警
                    </a>
                    <a
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      查看
                    </a>
                  </div>
                </div>
                <div
                  class="ant-descriptions-view"
                >
                  <table>
                    <tbody>
                      <tr
                        class="ant-descriptions-row"
                      >
                        <td
                          class="ant-descriptions-item"
                          colspan="1"
                        >
                          <div
                            class="ant-descriptions-item-container"
                          >
                            <span
                              class="ant-descriptions-item-label"
                            >
                              文本
                            </span>
                            <span
                              class="ant-descriptions-item-content"
                              style="min-width: 0;"
                            >
                              这是一段文本columns
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="ant-descriptions-row"
                      >
                        <td
                          class="ant-descriptions-item"
                          colspan="1"
                        >
                          <div
                            class="ant-descriptions-item-container"
                          >
                            <span
                              class="ant-descriptions-item-label"
                            >
                              状态
                            </span>
                            <span
                              class="ant-descriptions-item-content"
                              style="min-width: 0;"
                            >
                              <span
                                class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                              >
                                <span
                                  class="ant-badge-status-dot ant-badge-status-default"
                                />
                                <span
                                  class="ant-badge-status-text"
                                >
                                  全部
                                </span>
                              </span>
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="ant-descriptions-row"
                      >
                        <td
                          class="ant-descriptions-item"
                          colspan="1"
                        >
                          <div
                            class="ant-descriptions-item-container"
                          >
                            <span
                              class="ant-descriptions-item-label"
                            >
                              状态2
                            </span>
                            <span
                              class="ant-descriptions-item-content"
                              style="min-width: 0;"
                            >
                              open
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="ant-descriptions-row"
                      >
                        <td
                          class="ant-descriptions-item"
                          colspan="1"
                        >
                          <div
                            class="ant-descriptions-item-container"
                          >
                            <span
                              class="ant-descriptions-item-label"
                            >
                              时间
                            </span>
                            <span
                              class="ant-descriptions-item-content"
                              style="min-width: 0;"
                            >
                              2020-08-09
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="ant-descriptions-row"
                      >
                        <td
                          class="ant-descriptions-item"
                          colspan="1"
                        >
                          <div
                            class="ant-descriptions-item-container"
                          >
                            <span
                              class="ant-descriptions-item-label"
                            >
                              money
                            </span>
                            <span
                              class="ant-descriptions-item-content"
                              style="min-width: 0;"
                            >
                              <span>
                                ¥1,212,100.00
                              </span>
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr
                        class="ant-descriptions-row"
                      >
                        <td
                          class="ant-descriptions-item"
                          colspan="1"
                        >
                          <div
                            class="ant-descriptions-item-container"
                          >
                            <span
                              class="ant-descriptions-item-label"
                            >
                              百分比
                            </span>
                            <span
                              class="ant-descriptions-item-content"
                              style="min-width: 0;"
                            >
                              <span>
                                20.00%
                              </span>
                            </span>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <form
          autocomplete="off"
          class="ant-form ant-form-vertical ant-pro-form"
        >
          <input
            style="display: none;"
            type="text"
          />
          <div
            class="ant-pro-card ant-pro-card-border"
            style="width: 500px;"
          >
            <div
              class="ant-pro-card-header"
            >
              <div
                class="ant-pro-card-title"
              >
                配置菜单
              </div>
            </div>
            <div
              class="ant-pro-card-tabs"
            >
              <div
                class="ant-tabs ant-tabs-top"
              >
                <div
                  aria-orientation="horizontal"
                  class="ant-tabs-nav"
                  role="tablist"
                >
                  <div
                    class="ant-tabs-nav-wrap"
                  >
                    <div
                      class="ant-tabs-nav-list"
                      style="transform: translate(0px, 0px);"
                    >
                      <div
                        class="ant-tabs-tab ant-tabs-tab-active"
                        data-node-key="base"
                      >
                        <div
                          aria-controls="rc-tabs-test-panel-base"
                          aria-selected="true"
                          class="ant-tabs-tab-btn"
                          id="rc-tabs-test-tab-base"
                          role="tab"
                          tabindex="0"
                        >
                          基本配置
                        </div>
                      </div>
                      <div
                        class="ant-tabs-tab"
                        data-node-key="columns"
                      >
                        <div
                          aria-controls="rc-tabs-test-panel-columns"
                          aria-selected="false"
                          class="ant-tabs-tab-btn"
                          id="rc-tabs-test-tab-columns"
                          role="tab"
                          tabindex="-1"
                        >
                          列配置
                        </div>
                      </div>
                      <div
                        class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
                        style="width: 0px; left: 0px; transform: translateX(-50%);"
                      />
                    </div>
                  </div>
                  <div
                    class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
                  >
                    <button
                      aria-controls="rc-tabs-test-more-popup"
                      aria-expanded="false"
                      aria-haspopup="listbox"
                      class="ant-tabs-nav-more"
                      id="rc-tabs-test-more"
                      style="visibility: hidden; order: 1;"
                      type="button"
                    >
                      <span
                        aria-label="ellipsis"
                        class="anticon anticon-ellipsis"
                        role="img"
                      >
                        <svg
                          aria-hidden="true"
                          data-icon="ellipsis"
                          fill="currentColor"
                          focusable="false"
                          height="1em"
                          viewBox="64 64 896 896"
                          width="1em"
                        >
                          <path
                            d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
                <div
                  class="ant-tabs-content-holder"
                >
                  <div
                    class="ant-tabs-content ant-tabs-content-top"
                  >
                    <div
                      aria-hidden="false"
                      aria-labelledby="rc-tabs-test-tab-base"
                      class="ant-tabs-tabpane ant-tabs-tabpane-active"
                      id="rc-tabs-test-panel-base"
                      role="tabpanel"
                      tabindex="0"
                    >
                      <div
                        class="ant-form-item ant-form-item-vertical"
                      >
                        <div
                          class="ant-row ant-form-item-row"
                        >
                          <div
                            class="ant-col ant-form-item-label"
                          >
                            <label
                              class=""
                              for="title"
                              title="标题"
                            >
                              标题
                            </label>
                          </div>
                          <div
                            class="ant-col ant-form-item-control"
                          >
                            <div
                              class="ant-form-item-control-input"
                            >
                              <div
                                class="ant-form-item-control-input-content"
                              >
                                <span
                                  class="ant-input-affix-wrapper ant-input-outlined"
                                >
                                  <input
                                    class="ant-input"
                                    id="title"
                                    placeholder="请输入"
                                    type="text"
                                    value="高级定义列表"
                                  />
                                  <span
                                    class="ant-input-suffix"
                                  >
                                    <button
                                      class="ant-input-clear-icon"
                                      tabindex="-1"
                                      type="button"
                                    >
                                      <span
                                        aria-label="close-circle"
                                        class="anticon anticon-close-circle"
                                        role="img"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          data-icon="close-circle"
                                          fill="currentColor"
                                          fill-rule="evenodd"
                                          focusable="false"
                                          height="1em"
                                          viewBox="64 64 896 896"
                                          width="1em"
                                        >
                                          <path
                                            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
                                          />
                                        </svg>
                                      </span>
                                    </button>
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="ant-pro-form-group"
                      >
                        <div>
                          <div
                            class="ant-space ant-space-horizontal ant-space-align-start ant-pro-form-group-container "
                            style="column-gap: 32px; row-gap: 0;"
                          >
                            <div
                              class="ant-space-item"
                            >
                              <div
                                class="ant-form-item ant-form-item-vertical"
                              >
                                <div
                                  class="ant-row ant-form-item-row"
                                >
                                  <div
                                    class="ant-col ant-form-item-label"
                                  >
                                    <label
                                      class=""
                                      for="layout"
                                      title="布局"
                                    >
                                      布局
                                    </label>
                                  </div>
                                  <div
                                    class="ant-col ant-form-item-control"
                                  >
                                    <div
                                      class="ant-form-item-control-input"
                                    >
                                      <div
                                        class="ant-form-item-control-input-content"
                                      >
                                        <div
                                          class="ant-select ant-select-outlined ant-select-in-form-item ant-pro-filed-search-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
                                          style="min-width: 100px;"
                                        >
                                          <div
                                            class="ant-select-selector"
                                          >
                                            <span
                                              class="ant-select-selection-wrap"
                                            >
                                              <span
                                                class="ant-select-selection-search"
                                              >
                                                <input
                                                  aria-autocomplete="list"
                                                  aria-controls="layout_list"
                                                  aria-expanded="false"
                                                  aria-haspopup="listbox"
                                                  aria-owns="layout_list"
                                                  autocomplete="off"
                                                  class="ant-select-selection-search-input"
                                                  id="layout"
                                                  readonly=""
                                                  role="combobox"
                                                  style="opacity: 0;"
                                                  type="search"
                                                  unselectable="on"
                                                  value=""
                                                />
                                              </span>
                                              <span
                                                class="ant-select-selection-item"
                                                title="水平"
                                              >
                                                水平
                                              </span>
                                            </span>
                                          </div>
                                          <span
                                            aria-hidden="true"
                                            class="ant-select-arrow"
                                            style="user-select: none;"
                                            unselectable="on"
                                          >
                                            <span
                                              aria-label="down"
                                              class="anticon anticon-down ant-select-suffix"
                                              role="img"
                                            >
                                              <svg
                                                aria-hidden="true"
                                                data-icon="down"
                                                fill="currentColor"
                                                focusable="false"
                                                height="1em"
                                                viewBox="64 64 896 896"
                                                width="1em"
                                              >
                                                <path
                                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                                                />
                                              </svg>
                                            </span>
                                          </span>
                                          <span
                                            aria-hidden="true"
                                            class="ant-select-clear"
                                            style="user-select: none;"
                                            unselectable="on"
                                          >
                                            <span
                                              aria-label="close-circle"
                                              class="anticon anticon-close-circle"
                                              role="img"
                                            >
                                              <svg
                                                aria-hidden="true"
                                                data-icon="close-circle"
                                                fill="currentColor"
                                                fill-rule="evenodd"
                                                focusable="false"
                                                height="1em"
                                                viewBox="64 64 896 896"
                                                width="1em"
                                              >
                                                <path
                                                  d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
                                                />
                                              </svg>
                                            </span>
                                          </span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="ant-space-item"
                            >
                              <div
                                class="ant-form-item ant-form-item-vertical"
                              >
                                <div
                                  class="ant-row ant-form-item-row"
                                >
                                  <div
                                    class="ant-col ant-form-item-label"
                                  >
                                    <label
                                      class=""
                                      for="loading"
                                      title="加载中"
                                    >
                                      加载中
                                      <span
                                        aria-describedby="test-id"
                                        aria-label="question-circle"
                                        class="anticon anticon-question-circle ant-form-item-tooltip"
                                        role="img"
                                        title=""
                                      >
                                        <svg
                                          aria-hidden="true"
                                          data-icon="question-circle"
                                          fill="currentColor"
                                          focusable="false"
                                          height="1em"
                                          viewBox="64 64 896 896"
                                          width="1em"
                                        >
                                          <path
                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                                          />
                                          <path
                                            d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
                                          />
                                        </svg>
                                      </span>
                                    </label>
                                  </div>
                                  <div
                                    class="ant-col ant-form-item-control"
                                  >
                                    <div
                                      class="ant-form-item-control-input"
                                    >
                                      <div
                                        class="ant-form-item-control-input-content"
                                      >
                                        <button
                                          aria-checked="false"
                                          class="ant-switch"
                                          id="loading"
                                          role="switch"
                                          type="button"
                                        >
                                          <div
                                            class="ant-switch-handle"
                                          />
                                          <span
                                            class="ant-switch-inner"
                                          >
                                            <span
                                              class="ant-switch-inner-checked"
                                            />
                                            <span
                                              class="ant-switch-inner-unchecked"
                                            />
                                          </span>
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="ant-space-item"
                            >
                              <div
                                class="ant-form-item ant-form-item-vertical"
                              >
                                <div
                                  class="ant-row ant-form-item-row"
                                >
                                  <div
                                    class="ant-col ant-form-item-label"
                                  >
                                    <label
                                      class=""
                                      for="size"
                                      title="尺寸"
                                    >
                                      尺寸
                                    </label>
                                  </div>
                                  <div
                                    class="ant-col ant-form-item-control"
                                  >
                                    <div
                                      class="ant-form-item-control-input"
                                    >
                                      <div
                                        class="ant-form-item-control-input-content"
                                      >
                                        <div
                                          class="ant-select ant-select-outlined ant-select-in-form-item ant-pro-filed-search-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
                                          style="min-width: 100px;"
                                        >
                                          <div
                                            class="ant-select-selector"
                                          >
                                            <span
                                              class="ant-select-selection-wrap"
                                            >
                                              <span
                                                class="ant-select-selection-search"
                                              >
                                                <input
                                                  aria-autocomplete="list"
                                                  aria-controls="size_list"
                                                  aria-expanded="false"
                                                  aria-haspopup="listbox"
                                                  aria-owns="size_list"
                                                  autocomplete="off"
                                                  class="ant-select-selection-search-input"
                                                  id="size"
                                                  readonly=""
                                                  role="combobox"
                                                  style="opacity: 0;"
                                                  type="search"
                                                  unselectable="on"
                                                  value=""
                                                />
                                              </span>
                                              <span
                                                class="ant-select-selection-item"
                                                title="大"
                                              >
                                                大
                                              </span>
                                            </span>
                                          </div>
                                          <span
                                            aria-hidden="true"
                                            class="ant-select-arrow"
                                            style="user-select: none;"
                                            unselectable="on"
                                          >
                                            <span
                                              aria-label="down"
                                              class="anticon anticon-down ant-select-suffix"
                                              role="img"
                                            >
                                              <svg
                                                aria-hidden="true"
                                                data-icon="down"
                                                fill="currentColor"
                                                focusable="false"
                                                height="1em"
                                                viewBox="64 64 896 896"
                                                width="1em"
                                              >
                                                <path
                                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                                                />
                                              </svg>
                                            </span>
                                          </span>
                                          <span
                                            aria-hidden="true"
                                            class="ant-select-clear"
                                            style="user-select: none;"
                                            unselectable="on"
                                          >
                                            <span
                                              aria-label="close-circle"
                                              class="anticon anticon-close-circle"
                                              role="img"
                                            >
                                              <svg
                                                aria-hidden="true"
                                                data-icon="close-circle"
                                                fill="currentColor"
                                                fill-rule="evenodd"
                                                focusable="false"
                                                height="1em"
                                                viewBox="64 64 896 896"
                                                width="1em"
                                              >
                                                <path
                                                  d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
                                                />
                                              </svg>
                                            </span>
                                          </span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="ant-space-item"
                            >
                              <div
                                class="ant-form-item ant-form-item-vertical"
                              >
                                <div
                                  class="ant-row ant-form-item-row"
                                >
                                  <div
                                    class="ant-col ant-form-item-label"
                                  >
                                    <label
                                      class=""
                                      for="bordered"
                                      title="边框"
                                    >
                                      边框
                                      <span
                                        aria-describedby="test-id"
                                        aria-label="question-circle"
                                        class="anticon anticon-question-circle ant-form-item-tooltip"
                                        role="img"
                                        title=""
                                      >
                                        <svg
                                          aria-hidden="true"
                                          data-icon="question-circle"
                                          fill="currentColor"
                                          focusable="false"
                                          height="1em"
                                          viewBox="64 64 896 896"
                                          width="1em"
                                        >
                                          <path
                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                                          />
                                          <path
                                            d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
                                          />
                                        </svg>
                                      </span>
                                    </label>
                                  </div>
                                  <div
                                    class="ant-col ant-form-item-control"
                                  >
                                    <div
                                      class="ant-form-item-control-input"
                                    >
                                      <div
                                        class="ant-form-item-control-input-content"
                                      >
                                        <button
                                          aria-checked="false"
                                          class="ant-switch"
                                          id="bordered"
                                          role="switch"
                                          type="button"
                                        >
                                          <div
                                            class="ant-switch-handle"
                                          />
                                          <span
                                            class="ant-switch-inner"
                                          >
                                            <span
                                              class="ant-switch-inner-checked"
                                            />
                                            <span
                                              class="ant-switch-inner-unchecked"
                                            />
                                          </span>
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="ant-space-item"
                            >
                              <div
                                class="ant-form-item ant-form-item-vertical"
                              >
                                <div
                                  class="ant-row ant-form-item-row"
                                >
                                  <div
                                    class="ant-col ant-form-item-label"
                                  >
                                    <label
                                      class=""
                                      for="column"
                                      title="列数"
                                    >
                                      列数
                                    </label>
                                  </div>
                                  <div
                                    class="ant-col ant-form-item-control"
                                  >
                                    <div
                                      class="ant-form-item-control-input"
                                    >
                                      <div
                                        class="ant-form-item-control-input-content"
                                      >
                                        <div
                                          class="ant-input-number ant-input-number-in-form-item ant-input-number-outlined pro-field pro-field-xs"
                                        >
                                          <div
                                            class="ant-input-number-handler-wrap"
                                          >
                                            <span
                                              aria-disabled="false"
                                              aria-label="Increase Value"
                                              class="ant-input-number-handler ant-input-number-handler-up"
                                              role="button"
                                              unselectable="on"
                                            >
                                              <span
                                                aria-label="up"
                                                class="anticon anticon-up ant-input-number-handler-up-inner"
                                                role="img"
                                              >
                                                <svg
                                                  aria-hidden="true"
                                                  data-icon="up"
                                                  fill="currentColor"
                                                  focusable="false"
                                                  height="1em"
                                                  viewBox="64 64 896 896"
                                                  width="1em"
                                                >
                                                  <path
                                                    d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
                                                  />
                                                </svg>
                                              </span>
                                            </span>
                                            <span
                                              aria-disabled="false"
                                              aria-label="Decrease Value"
                                              class="ant-input-number-handler ant-input-number-handler-down"
                                              role="button"
                                              unselectable="on"
                                            >
                                              <span
                                                aria-label="down"
                                                class="anticon anticon-down ant-input-number-handler-down-inner"
                                                role="img"
                                              >
                                                <svg
                                                  aria-hidden="true"
                                                  data-icon="down"
                                                  fill="currentColor"
                                                  focusable="false"
                                                  height="1em"
                                                  viewBox="64 64 896 896"
                                                  width="1em"
                                                >
                                                  <path
                                                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                                                  />
                                                </svg>
                                              </span>
                                            </span>
                                          </div>
                                          <div
                                            class="ant-input-number-input-wrap"
                                          >
                                            <input
                                              aria-valuemin="0"
                                              aria-valuenow="3"
                                              autocomplete="off"
                                              class="ant-input-number-input"
                                              id="column"
                                              placeholder="请输入"
                                              role="spinbutton"
                                              step="1"
                                              value="3"
                                            />
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProDescriptions 动态配置 Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 描述列表标题，支持动态修改
        </li>
        <li>
          <strong>
            column
          </strong>
          : 列数，支持动态调整
        </li>
        <li>
          <strong>
            columns
          </strong>
          : 列配置数组，支持动态增删改
        </li>
        <li>
          <strong>
            request
          </strong>
          : 异步请求函数，返回数据
        </li>
      </ul>
      <h4>
        ProCard 布局配置：
      </h4>
      <ul>
        <li>
          <strong>
            variant
          </strong>
          : 卡片变体样式，'outlined' 表示带边框
        </li>
        <li>
          <strong>
            split
          </strong>
          : 分割方式，'vertical' 表示垂直分割
        </li>
        <li>
          <strong>
            headerBordered
          </strong>
          : 是否显示头部边框
        </li>
        <li>
          <strong>
            colSpan
          </strong>
          : 列跨度，支持 calc() 计算
        </li>
      </ul>
      <h4>
        ProForm 表单配置：
      </h4>
      <ul>
        <li>
          <strong>
            initialValues
          </strong>
          : 表单初始值
        </li>
        <li>
          <strong>
            onValuesChange
          </strong>
          : 值变化时的回调函数
        </li>
        <li>
          <strong>
            submitter
          </strong>
          : 提交按钮配置，false 表示不显示
        </li>
      </ul>
      <h4>
        基本配置选项：
      </h4>
      <ul>
        <li>
          <strong>
            layout
          </strong>
          : 布局方式，horizontal/vertical
        </li>
        <li>
          <strong>
            loading
          </strong>
          : 是否显示加载状态
        </li>
        <li>
          <strong>
            size
          </strong>
          : 尺寸，default/middle/small
        </li>
        <li>
          <strong>
            bordered
          </strong>
          : 是否显示边框
        </li>
      </ul>
      <h4>
        列配置选项：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 列标题
        </li>
        <li>
          <strong>
            span
          </strong>
          : 占据列数
        </li>
        <li>
          <strong>
            valueType
          </strong>
          : 值类型，支持多种类型
        </li>
        <li>
          <strong>
            dataIndex
          </strong>
          : 数据字段名
        </li>
        <li>
          <strong>
            valueEnum
          </strong>
          : 枚举值配置（仅 select 类型）
        </li>
      </ul>
      <h4>
        ProFormList 特点：
      </h4>
      <ul>
        <li>
          <strong>
            动态列表
          </strong>
          : 支持动态添加和删除列配置
        </li>
        <li>
          <strong>
            itemRender
          </strong>
          : 自定义列表项渲染
        </li>
        <li>
          <strong>
            creatorButtonProps
          </strong>
          : 创建按钮配置
        </li>
      </ul>
      <h4>
        ProFormDependency 依赖配置：
      </h4>
      <ul>
        <li>
          <strong>
            条件渲染
          </strong>
          : 根据 valueType 条件显示表单项
        </li>
        <li>
          <strong>
            JSON 解析
          </strong>
          : 自动解析和格式化 valueEnum
        </li>
        <li>
          <strong>
            实时更新
          </strong>
          : 依赖字段变化时实时更新
        </li>
      </ul>
      <h4>
        ValueType 支持类型：
      </h4>
      <ul>
        <li>
          <strong>
            基础类型
          </strong>
          : text, password, textarea, code
        </li>
        <li>
          <strong>
            数字类型
          </strong>
          : money, percent, digit, second
        </li>
        <li>
          <strong>
            日期类型
          </strong>
          : date, dateTime, time 等
        </li>
        <li>
          <strong>
            选择类型
          </strong>
          : select, checkbox, radio 等
        </li>
        <li>
          <strong>
            特殊类型
          </strong>
          : avatar, image, switch, progress 等
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            配置工具
          </strong>
          : 构建动态配置界面
        </li>
        <li>
          <strong>
            可视化编辑
          </strong>
          : 可视化编辑组件配置
        </li>
        <li>
          <strong>
            原型设计
          </strong>
          : 快速原型设计和验证
        </li>
        <li>
          <strong>
            调试工具
          </strong>
          : 调试和测试组件配置
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            状态管理
          </strong>
          : 合理管理配置状态
        </li>
        <li>
          <strong>
            实时预览
          </strong>
          : 提供实时预览功能
        </li>
        <li>
          <strong>
            配置验证
          </strong>
          : 对配置进行验证
        </li>
        <li>
          <strong>
            用户体验
          </strong>
          : 提供直观的配置界面
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>